<template>
  <div class="data-one" ref="one"></div>
</template>

<script>
// import  ES6模块化规则
// import echarts from "echarts"
// require  commonJs模块化规范 node.js采用的规范
// import * as echarts from "echarts";
const echarts = require("echarts");
import { paiming } from "../network/api/api";
export default {
  name: "DataOne",
  data() {
    return {
      oneDate: {},
    };
  },
  created() {
    // console.log(this.$refs.one)
    // this.$nextTick(()=>{
    //   console.log(document.getElementsByClassName("data-one"))
    // })
  },
  methods: {
    //echarts初始化函数
    echartsInit() {
      let echartsOne = echarts.init(this.$refs.one);
      //配置项参数
      let options = {
        title: {
          text: "最近排名趋势",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.oneDate.kefu,
          bottom: "0",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data:this.oneDate.dateM ,
        },
        yAxis: {
          type: "value",
        },
        series: this.oneDate.zong,
      };
      //将配置项应用到图表中
      echartsOne.setOption(options);
    },
    // 请求数据函数
    getPaimingData(){
      paiming().then((res) => {
        console.log(res)
        this.oneDate = res.data;
        this.echartsInit()
      });
    }
  },
  mounted() {
    this.getPaimingData()
  },
};
</script>

<style lang="less" scoped>
.data-one {
  width: 100%;
  height: 700px;
  padding-bottom: 300px;
}
</style>